<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
</head>
<style>
    body{
        border:1px solid red;
    }
</style>
<body>
    <button id="myBtn">Click</button>
</body>
<script>
    // let myBtn = document.getElementById('myBtn');
    // myBtn.onclick = function(event){
    //     console.log(event.target === this);       // true
    //     console.log(event.currentTarget === this);// true
    // }

    // document.body.onclick = function(event){
    //     console.log(event.currentTarget === document.body);
    //     console.log(this === document.body);
    //     console.log(event.target === document.getElementById('myBtn'));
    // }

    let myBtn = document.getElementById('myBtn');
    myBtn.addEventListener('click',(event)=>{
        // event.stopPropagation();   //调用之后 '----body' 不在打印
        console.log('----myBtn');  //----myBtn
    })
    document.body.addEventListener('click',(event)=>{
        console.log('----body');   //----body
        event.stopPropagation();   //调用之后 '----body' 不在打印
    },true)

    // const myBtn = document.getElementById('myBtn');
    // myBtn.onclick = function(event){
    //     console.log('事件处理程序在目标上调用',event.eventPhase);
    // }
    // document.body.addEventListener('click',(event)=>{
    //     console.log('事件处理程序在捕获阶段被调用',event.eventPhase);
    // },true)
    // document.body.addEventListener('click',(event)=>{
    //     console.log('事件处理程序在冒泡阶段被调用',event.eventPhase);
    // })
    // 事件处理程序在捕获阶段被调用 1
    // 事件处理程序在目标上调用 2
    // 事件处理程序在冒泡阶段被调用 3
</script>
</html>